<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no'>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/coupon_list.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../lib/swipe(css)/swiper.css">

    <script src="../js/htmlFont.js"></script>
    <title>优惠券列表</title>
</head>

<body>
    <h1></h1>
    <!-- 头部 -->
    <header>
        <div class="header-top">
            <span class="iconfont icon-fanhui"></span>
            <h3>肯德基优惠卷</h3>
            <img src="../images/header_app.png" alt="">
        </div>
    </header>
    <!-- 列表 -->
    <div class="content_list">
        <h4 class="cont_top">一点餐出示手机中的优惠券，即可享受优惠~~~</h4>
        <div class="products">
        </div>
    </div>

    <!-- 轮播图部分 -->
    <div class="box">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../img/tj2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../img/tj3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../img/tj4.jpg" alt=""></div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-next swiper-button-white"></div>
            <!-- 白色 -->
            <div class="swiper-button-prev swiper-button-white"></div>
            <!-- 白色 -->
        </div>
    </div>

</body>

</html>
<script src="../lib/jquery/jquery-1.12.4.js"></script>
<script src="../lib/template/template.js"></script>
<script src="../lib/utils/utils.js"></script>
<script src="../lib/swipe(js)/swiper.js"></script>
<script type="text/template" id="listTemp">
    {{each result as val key}}
    <div class="product">
        <a href="#" data-id="{{val.couponProductId}}">{{val.couponProductImg}}</a>
        <div class="product_right">
            <p>{{val.couponProductName}}</p>
            <span>￥ 28</span>
        </div>
    </div>
    <h3>有效期至10月31日</h3>
    {{/each}}
</script>

<!-- 这是轮播图的模版 -->
<script type="text/template" id="bannerTemp">
    {{each result as val key}}
    <div class="swiper-slide"><img src="../img/tj2.jpg" alt=""></div>
    {{/each}}
</script>
<script>
    $(function() {
        var str = location.search;
        // console.log(str);
        // 1.1 获取对应的id值
        var id = units.coverToObj(str).id;
        // console.log(id);
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getcouponproduct",
            data: {
                couponid: id
            },
            dataType: "jsonp",
            success: function(res) {
                console.log(res);
                template.config("escape", false)
                var htmlStr = template("listTemp", res);
                $(".products").html(htmlStr);
            }
        });


        // 遮罩层和轮播图
        banner();

        function banner() {
            var mySwiper = new Swiper('.swiper-container', {
                loop: false, // 循环模式选项
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        }
        // 轮播
        cc();

        function cc() {
            // 1 委派注册事件
            $(".products").on("click", ".product>a", function() {
                // 2显示遮罩层
                var id1 = $(this).attr("data-id");
                console.log(id1);
                // 2发送ajax请求
                $.ajax({
                    type: "get",
                    url: "http://193.112.55.79:9090/api/getcouponproduct",
                    data: {
                        couponid: "0"
                    },
                    dataType: "json",
                    success: function(res) {
                        console.log(res);
                    }
                });
                // 显示遮罩层
                $("body>h1").show();
                $(".box").show();
                // 调用轮播的方法
                banner();

            })
        }
    })
</script>